import React, { Component } from "react";
import PubSub from "pubsub-js";
// /import axios from "axios";
export default class index extends Component {
  seachRes = async () => {
    const { value } = this.keyWordEle;
    PubSub.publish("UPDATE", { isFirst: false, isLoading: true });
    // axios.get(`/api/search/users332?q=${value}`).then(
    //   (res) => {
    //     const {
    //       data: { items },
    //     } = res;
    //     PubSub.publish("UPDATE", { items, isLoading: false });
    //   },
    //   (err) => {
    //     PubSub.publish("UPDATE", { err: err.message, isLoading: false });
    //   }
    // );

    // fetch(`/api/search/usersss?q=${value}`)
    //   .then((response) => {
    //     console.log("跟服务端连接上了", response);
    //     return response.json();
    //   })
    //   .then((res) => {
    //     console.log("拿到数据了", res);
    //     const { items } = res;
    //     PubSub.publish("UPDATE", { items, isLoading: false });
    //   })
    //   .catch((e) => {
    //     console.log(e, "r:::");
    //   });

    const response = await fetch(`/api/search/users?q=${value}`);
    const data = await response.json();
    const { items } = data;
    PubSub.publish("UPDATE", { items, isLoading: false });
    console.log(data);
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索相关用户</h3>
        <div>
          <input
            ref={(c) => (this.keyWordEle = c)}
            type="text"
            placeholder="输入关键字"
          />
          &nbsp;<button onClick={this.seachRes}>搜索</button>
        </div>
      </section>
    );
  }
}
